<div class="app-table">
  <nz-table #nzTable [nzData]="functionList" [(nzPageSize)]="pageSize" [(nzPageIndex)]="pageNo" nzShowSizeChanger
    [nzTotal]="totalCount" [nzShowTotal]="rangeTemplate" [nzNoResult]="noResult" [nzLoading]="isLoading"
    [nzFrontPagination]="false" (nzPageIndexChange)="getFunctionList(groupId, name)"
    (nzPageSizeChange)="getFunctionList(groupId, name)" [nzShowPagination]="totalCount>10" class="table-fixed">
    <thead>
      <tr>
        <th nzWidth="2.5rem">ID/名称</th>
        <th *ngIf="showGroupName">标签<nzi-help
            [options]="{'title': '标签用于标注和组织您的云资源，方便您搜索和进行资源操作。可点击右上角标签按钮，跳转到标签管理主页进行资源搜索等操作。'}"> </nzi-help>
        </th>
        <th>函数状态</th>
        <th>运行环境</th>
        <th>运行内存</th>
        <th *ngIf="showGroupName">所属应用</th>
        <th nzWidth="2rem">更新时间</th>
        <th nzWidth="1.6rem">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of nzTable.data; let i = index;">


        <!-- nzLeft="0px" -->
        <td>

          <in-acl-btn [inActions]="data?.resActions" inAction="GetFunction" inLabel="{{data.functionId}}">
            <p nz-popover [nzPopoverContent]="data.functionId" class="ellipsis">
              <a routerLink="/fcs-manage/function/detail/{{data.groupId}}/{{data.functionId}}/LATEST">
                <span class="ellipsis before-opt">{{data.functionId}}</span>
              </a>

              <a class="td-opt" ngxClipboard [cbContent]="data?.functionId" (cbOnSuccess)="successFun()">
                <i class="iconfont icon-gongnengtubiao-fuzhicopy"></i>
              </a>
            </p>
          </in-acl-btn>
          <p class="ellipsis">
            <span nz-popover [nzPopoverContent]="data.functionName">{{data.functionName}}</span>
          </p>

        </td>
        <td *ngIf="showGroupName">
          <nzi-tms [nziResourceTags]="nziResourceTags" [nziLoading]="nziTmsLoading" nziResourceType="fcs"
            [nziInstanceName]="data?.functionName" [nziInstanceId]="data?.functionId" nziPopoverPlacement="top"
            resourceDetailUrl="/ifcs/#/fcs-manage/function/detail/{{data?.groupId}}/{{data?.functionId}}/LATEST">
          </nzi-tms>
        </td>

        <td [innerHtml]="data.status | status:'fcs-status' | async">
          {{data.status || '--'}}
        </td>
        <td>
          {{data?.runtimeShow || '--'}}
        </td>
        <td>{{data?.memorySize + 'MB'|| '--'}}</td>
        <td *ngIf="showGroupName">
          <p class="ellipsis" nz-popover [nzContent]="data.groupDisplayName">
            <span>{{data?.groupDisplayName || '--'}}</span>
          </p>
        </td>
        <td>{{(data?.updateTime| date: 'yyyy-MM-dd HH:mm:ss') || '--'}}</td>
        <td class="table-opt">
          <in-acl-source [inGroup]="'tableAction'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
            [inActions]="['GetFunction','UpdateFunction','DeleteFunction']" [inInstanceId]="data?.id"
            [inResourceAccountId]="data?.accountId" [inTrData]="data" [inIsLast]="i===nzTable.data.length-1">
            <ng-container *ngIf="(data.status === 'updating' || data.status === 'creating')">
              <in-acl-btn [inActions]="data?.resActions" inAction="UpdateFunction" inLabel="配置">
                <span nz-popover
                  [nzContent]="data?.status ==='creating' ? '当前函数正在创建中，不支持配置':(data?.status === 'updating' ? '当前函数正在更新中，不支持配置':'')">
                  <a class="disable-btn" *ngIf="(data.status === 'updating' || data.status === 'creating')"
                    (click)="editFunction(data)" disabled>配置</a>
                </span>
              </in-acl-btn>
              <span nz-popover
                [nzContent]="data?.status ==='creating' ? '当前函数正在创建中，不支持复制':(data?.status === 'updating' ? '当前函数正在更新中，不支持复制':'')">
                <a class="disable-btn" *ngIf="(data.status === 'updating' || data.status === 'creating')"
                  disabled>复制</a>
              </span>
              <in-acl-btn [inActions]="data?.resActions" inAction="DeleteFunction" inLabel="删除">
                <a (click)="deleteFunction(data)">删除</a>
              </in-acl-btn>
            </ng-container>
            <ng-container *ngIf="(data.status != 'updating' && data.status !== 'creating')">

              <in-acl-btn [inActions]="data?.resActions" inAction="UpdateFunction" inLabel="配置">
                <a *ngIf="(data.status != 'updating' && data.status !== 'creating')" (click)="editFunction(data)">配置</a>
              </in-acl-btn>
              <span nz-popover
                [nzContent]="data?.status ==='creating' ? '当前函数正在创建中，不支持复制':(data?.status === 'updating' ? '当前函数正在更新中，不支持复制':(data?.status === 'failure' ? '当前函数异常，不支持复制':''))">
                <a *ngIf="(data.status != 'updating' && data.status !== 'creating' && data.status === 'failure')"
                  (click)="copyFunction(copyFormContent,data)" disabled>复制</a>
              </span>

              <a *ngIf="(data.status != 'updating' && data.status !== 'creating' && data.status !== 'failure')"
                (click)="copyFunction(copyFormContent,data)">复制</a>
              <in-acl-btn [inActions]="data?.resActions" inAction="DeleteFunction" inLabel="删除">
                <a (click)="deleteFunction(data)">删除</a>
              </in-acl-btn>

            </ng-container>
          </in-acl-source>
        </td>

      </tr>
    </tbody>
    <ng-template #noResult>
      <ng-container *ngIf="(pageNo==1 && !hasInputValue)">
        <table-no-result-add title="抱歉，你还没有函数！" inLabel="去创建"   inAction="CreateFunction" 
        (actionClick)="createFunction()" [inAclActions]="inActions">
        </table-no-result-add>
      </ng-container>
      <ng-container *ngIf="hasInputValue">
        <table-no-result-search></table-no-result-search>
      </ng-container>
    </ng-template>
    <ng-template #rangeTemplate let-range="range" let-total>
      共{{total}}条
    </ng-template>
  </nz-table>
</div>

<ng-template #copyFormContent>
  <form nz-form [formGroup]="changeCopyForm">
    <!-- 添加防CSRF验证字段 -->
    <input type="hidden" formControlName="timestamp" />
    <input type="hidden" formControlName="nonce" />
    <nz-form-item>
      <nz-form-label>应用<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <nz-select formControlName="copyApp" nzPlaceHolder="请选择应用" [(ngModel)]="selectApplicationId"
          (ngModelChange)="groupChange($event)">
          <nz-option *ngFor="let object of applicationList" [nzLabel]="object.displayName" [nzValue]="object.id">
          </nz-option>
        </nz-select>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>名称<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="copyName" placeholder="">
        <nz-form-explain style="display:block;margin-left:0;"
          *ngIf="changeCopyForm.get('copyName').dirty && changeCopyForm.get('copyName').errors && !changeCopyForm.get('copyName').hasError('duplicated')"
          class="from-help">
          由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以小写字母或数字结尾
        </nz-form-explain>
        <nz-form-explain
          *ngIf="changeCopyForm.get('copyName').dirty && changeCopyForm.get('copyName').hasError('duplicated')">
          该名称已存在
        </nz-form-explain>
        <nz-form-explain *ngIf="!changeCopyForm.get('copyName').dirty || !changeCopyForm.get('copyName').errors">
          由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以小写字母或数字结尾
        </nz-form-explain>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>复制内容<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <label nz-checkbox nzDisabled [ngModel]="true" formControlName="copyCode">函数代码</label>
        <label nz-checkbox [(ngModel)]="checked" formControlName="copyEdit">函数配置</label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>描述</nz-form-label>
      <nz-form-control>
        <textarea nz-input rows="4" formControlName="description" placeholder="请输入函数描述"></textarea>
        <nz-form-explain>
          最大支持500个字符</nz-form-explain>

      </nz-form-control>
    </nz-form-item>

  </form>
</ng-template>
